<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <title>Document</title>
</head>

<body>
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
        <form id="ff" method="post">
            <input class="easyui-textbox" name="_id">

            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="sex" style="width:100%" data-options="label:'sex:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="phone" style="width:100%" data-options="label:'phone:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'password:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>

    </div>
</body>

</html>
<script>
    $('#dg').datagrid({
        url: 'http://localhost:3000/users/list',
        pagination: true,
        columns: [
            [{
                    field: 'name',
                    title: 'Name',
                    width: 100
                },{
                    field: 'sex',
                    title: '性别',
                    width: 100
                },{
                    field: 'phone',
                    title: '手机号',
                    width: 100
                },
                {
                    field: '_id',
                    title: '操作',
                    width: 80,
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:;" onclick="deleteRow(\'' + value +
                            '\')">删除</a> <a href="javascript:;" onclick="editRow(\'' + value +
                            '\')">修改</a>'
                    }
                }
            ]
        ],
        toolbar: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function () {
                $('#dlg').dialog('open');
            }
        }, {
            text: 'Cut',
            iconCls: 'icon-cut',
            handler: function () {
                alert('cut')
            }
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function () {
                alert('save')
            }
        }]
    });


    function submitForm() {
        $('#ff').form('submit', {
                onSubmit: function () {
                    var formData = $('#ff').serializeJSON();


                    if ($(this).form('enableValidation').form('validate')) {
                        if (formData._id.trim().length > 0) {
                            $.ajax({
                                url: 'http://localhost:3000/users/data/' + formData._id,
                                method: 'put',
                                data:formData   
                            }).then(res => {
                                $('#dg').datagrid('reload');
                                $('#dlg').dialog('close');
                            })
                        } else {
                            delete formData._id;
                            $.ajax({
                                url: 'http://localhost:3000/users/data',
                                method: 'post',
                                data:formData
                            }).then(res => {
                                $('#dg').datagrid('reload');
                                $('#dlg').dialog('close');
                            })
                        }

                    } else {
                        alert('请填写数据');

                    }

                }
            }
            // if ($(this).form('enableValidation').form('validate')) {
            //     $.ajax({
            //         url: 'http://localhost:3000/users/data',
            //         method: 'post',
            //         data: $("#ff").serializeJSON()
            //     }).then(res => {
            //         $('#dg').datagrid('reload');
            //         $('#dlg').dialog('close');
            //     })

            // } else {
            //     alert('请填写数据');
            // }

        )
    }


    function clearForm() {
        $('#ff').form('clear');
    }

    function deleteRow(id) {

        $.messager.confirm('删除确认', '你确定删除该信息么?', function (r) {
            if (r) {
                $.ajax({
                    url: 'http://localhost:3000/users/data/' + id,
                    method: 'delete'
                }).then(res => {
                    $('#dg').datagrid('reload');
                })
            }
        });
    };

    function editRow(id) {
        $.ajax({
            url: 'http://localhost:3000/users/data/' + id,
            method: 'get'
        }).then(res => {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })
    };
</script>